<template>
  <div class='container'>
    <el-dialog
      :title="RuleForm.id?'修改标签':'添加标签' "
      :visible="isShow"
      width="400px"
      @close="Cancel"
    >
      <el-form
        label-width="90px"
        :model="RuleForm"
        :rules='Rules'
        ref="RuleForm"
      >
        <el-form-item
          label="所属学科"
          prop='subjectID'
        >
          <!-- created钩子函数为页面初始化时触发
           mounted钩子函数为dom节点加载完毕时触发
           el-select绑定值赋值后，页面无法显示对应label值的原因是 
            当弹窗打开 获取后台返回的学科id时 获取学科数组的函数还没触发 此时学科数组就是为空 自然就找不到对应的label值
             解决方法为 
             在created钩子函数 即页面初始化完成之后就调用获取学科列表的函数 
             那么当弹窗打开 获取后台返回的学科id后就能在学科列表中找到对应的值
          -->
          <el-select
            v-model="RuleForm.subjectID"
            @focus="select"
          >
            <el-option
              v-for="item in ObjectList"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="标签名称"
          prop='tagName'
        >
          <el-input
            type="text"
            style="width:217px;height:36px"
            v-model="RuleForm.tagName"
          />
        </el-form-item>
      </el-form>
      <el-row slot="footer">
        <el-col>
          <el-button @click="Cancel">取消</el-button>
          <el-button
            type="primary"
            @click="btnOK"
          >确定</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { add, detail, update } from '@/api/hmmm/tags'
import { simple } from '@/api/hmmm/subjects'
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      ObjectList: [],
      Rules: {
        subjectID: [{ required: true, message: '请选择学科名称', trigger: 'blur' }],
        tagName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { max: 10, min: 2, message: '标签名称的长度在4-10个字符之间', trigger: 'change' }
        ]
      },

      RuleForm: {
        tagName: '',
        addDate: null,
        subjectID: null
      }
    }
  },
  methods: {
    async select () {
      const { data } = await simple()
      this.ObjectList = data
      console.log(typeof this.ObjectList[0].value);
    },

    btnOK () {
      this.$refs.RuleForm.validate(async isok => {
        if (isok) {
          if (this.RuleForm.id) {
            try {
              console.log(this.RuleForm);

              await update(this.RuleForm)
              this.$message.success('修改标签成功！')
              // 重新获取数据
              this.$parent.loadTagsList()
              // 关闭弹窗
              this.$emit('update:isShow', false)
              // 清空表单
              this.$refs.RuleForm.resetFields()
            } catch (error) {
              console.log(error);
              this.$message.error('修改标签失败！')
            }
          } else {
            this.RuleForm.addDate = new Date()
            try {
              // 发送请求
              await add(this.RuleForm)
              // 提示信息
              this.$message.success('添加标签成功')
              // 重新获取数据
              this.$parent.loadTagsList()
              // 关闭弹窗
              this.$emit('update:isShow', false)
              // 清空表单
              this.$refs.RuleForm.resetFields()
            } catch (err) {
              this.$message.error('添加标签失败')
              console.log(err);
            }
          }

        } else {
          this.$message.error('表单校验失败')
        }
      })
    },

    Cancel () {
      this.RuleForm = {
        subjectName: '',
        tagName: '',
        subjectID: null,
        addDate: null,
      },
        // 关闭弹窗
        this.$emit('update:isShow', false)
      // 清空表单
      this.$refs.RuleForm.resetFields()
    },

    async loadDetail (id) {
      // const Subject = [
      //   { value: 20, label: "1" },
      //   { value: 16, label: "大数据" },
      //   { value: 19, label: "杰哥" },
      //   { value: 18, label: "强哥" },
      //   { value: 17, label: "网络安全" },
      //   { value: 15, label: "Unity" },
      //   { value: 14, label: "UI" },
      //   { value: 13, label: "c" },
      //   { value: 12, label: "c#" },
      //   { value: 11, label: "php" },
      //   { value: 10, label: "运维" },
      //   { value: 9, label: "算法" },
      //   { value: 8, label: "数据库" },
      //   { value: 6, label: "产品" },
      //   { value: 5, label: "设计" },
      //   { value: 4, label: "前端" },
      //   { value: 3, label: "安卓" },
      //   { value: 2, label: "ios" },
      //   { value: 1, label: "java" }
      // ]
      const { data } = await detail(id)
      // const fa = Subject.find(item => item.value == data.subjectID)
      this.RuleForm = data
      // this.RuleForm.subjectName = fa.label
      console.log(typeof this.RuleForm.subjectID);
    }

  },
  created () {
    this.select()
  }
}
</script>

<style scoped lang='scss'></style>

